<template>
    <div>
        <el-form label-width="100px">
            <el-form-item label="SKU名称">
                <el-input aria-placeholder="输入SKU名称" v-model="skuParams.skuName"></el-input>
            </el-form-item>
            <el-form-item label="价格(元)">
                <el-input aria-placeholder="价格(元)" type="number" v-model="skuParams.price"></el-input>
            </el-form-item>
            <el-form-item label="重量(g)">
                <el-input type="number" aria-placeholder="重量(g)" v-model="skuParams.weight"></el-input>
            </el-form-item>
            <el-form-item label="SKU描述">
                <el-input type="textarea" aria-placeholder="SKU描述" v-model="skuParams.skuDesc"></el-input>
            </el-form-item>

            <el-form-item label="平台属性">
                <el-form :inline="true">
                    <el-form-item :label="item.attrName" style="width: 180px;" v-for="(item, index) in attrArr"
                        :key="item.id">
                        <el-select  v-model="item.attrIdAndvalueId">
                            <el-option :value="`${item.id}:${attr.id}`" v-for="(attr, index) in item.attrValueList" :key="attr.id"
                                :label="attr.valueName"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-form-item>
            <el-form-item label="销售属性">
                <el-form :inline="true">
                    <el-form-item :label="item.saleAttrName" style="width: 180px;" v-for="(item, index) in SaleAttrList"
                        :key="item.id">
                        <el-select v-model="item.saleIdAndvalueId">
                            <el-option :value="`${item.id}:${attr.id}`"
                                v-for="(attr, index) in item.spuSaleAttrValueList" :key="attr.id"
                                :label="attr.saleAttrValueName"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-form-item>
            <el-form-item label="图片名称">
                <el-table border :data="ImageList" ref="table">
                    <el-table-column type="selection" width="80px" align="center"></el-table-column>
                    <el-table-column label="图片">
                        <template #="{ row, $index }">
                            <img :src="row.url" width="100px" height="100px" />
                        </template>
                    </el-table-column>
                    <el-table-column label="名称" prop="name"></el-table-column>
                    <el-table-column label="操作">
                        <template #="{ row, $index }">
                            <el-button type="primary" @click="handle(row)">设置默认</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="save">保存</el-button>
                <el-button @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang='ts'>
import { reqAttr } from '@/api/product/attr';
import { reqSpuInfo ,reqAddSku} from '@/api/product/spu'
import { ElMessage } from 'element-plus';
import { ref, reactive } from 'vue'
const attrArr = ref([])
const SaleAttrList = ref([])
const ImageList = ref([])
const table = ref()
const skuParams = reactive({
    category3Id: '',
    spuId: "",
    tmId: '',
    skuName: '',
    price: '',
    weight: '',
    skuDesc: '',
    skuAttrValueList: [],
    skuSaleAttrValueList: [],
    skuDefaultImg: ""
})

const emit = defineEmits(['changeScene'])
const cancel = () => {
    emit('changeScene', 0)
}

const initSkuData = async (c1Id, c2Id, spu) => {
    skuParams.category3Id = spu.category3Id
    skuParams.spuId = spu.id
    skuParams.tmId = spu.tmId
    const res = await reqAttr(c1Id, c2Id, spu.category3Id)
    const InfoList = await reqSpuInfo(spu.id)
    attrArr.value = res.data
    SaleAttrList.value = InfoList.data.spuSaleAttrList
    ImageList.value = InfoList.data.spuImageList.map(item => {
        return {
            name: item.imgName,
            url: item.imgUrl
        }
    })
}
const handle = (row)=>{
    table.value.clearSelection()
    table.value.toggleRowSelection(row,true)
    skuParams.skuDefaultImg=row.url
}
const save = async ()=>{
    skuParams.skuAttrValueList = attrArr.value.reduce((prev,next)=>{
        if(next.attrIdAndvalueId){
            const [attrId,valueId] = next.attrIdAndvalueId.split(':')
            prev.push({
                attrId,
                valueId
            })
        }
        return prev
    },[])

    skuParams.skuSaleAttrValueList = SaleAttrList.value.reduce((prev,next)=>{
        if(next.saleIdAndvalueId){
            const [saleAttrId,saleAttrValueId] = next.saleIdAndvalueId.split(':')
            prev.push({
                saleAttrId,
                saleAttrValueId
            })
        }
        return prev
    },[])

    const res = await reqAddSku(skuParams)
    // console.log(res)
    if(res.code == 200){
        ElMessage({
            type:"success",
            message:"success"
        })
        emit('changeScene',0)
    }else{
        ElMessage({
            type:"error",
            message:"error"
        })
    }
}
defineExpose({ initSkuData })
</script>

<style scoped></style>